<template>
<div class="customsDeclarationInvoiceVue">



  <div class="head">

    <div class="btns clearfix">
      <!-- <el-button class="export" :disabled="!editable" type="primary">导出</el-button> -->
    </div>


    <div class="tcf-table">
      <div class="tcf-table-in">
        <el-row>
          <el-col :span="24">
            <div>
              <p>TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD:</p>
              <p>NO.88-2-2205,HUANHE SOUTH ROAD,CHINA(TIANJIN)PILOT FREE TRADE ZONE</p>
              <p>TIANJIN AIRPORT ECONOMIC AREA),TIANJIN,CHINA</p>
              <p>TEL:+86-10-50911288</p>
              <p>COMMERCIAL INVOICE</p>
            </div>
          </el-col>
        </el-row>
        <el-row class="-from">
          <el-col :span="4" class="-to01">
            <p>TO:</p>
          </el-col>
          <el-col :span="8">
            <div class="bill-of-lading-project-requires -bill-of-lading-project-requires -to02">
              <ul>
                <li>
                  <el-row>
                    <el-input :readonly="!editable"   v-model="data.documentprocess_cc_cdi_toName" placeholder="请输入买方"></el-input>
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <el-input :readonly="!editable"   v-model="data.documentprocess_cc_cdi_toAdd" placeholder="请输入买方地址"></el-input>
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <el-input :readonly="!editable"   v-model="data.documentprocess_cc_cdi_toTel" placeholder="请输入买方电话"></el-input>
                  </el-row>
                </li>
              </ul>
            </div>
          </el-col>
          <el-col :span="4" class="-to03"></el-col>
          <el-col :span="8" class="-el-col -to04">
            <div class="bill-of-lading-project-requires -bill-of-lading-project-requires">
              <ul>
                <li>
                  <el-row>
                    <el-col :span="12" style="text-align:left;">
                      Invoice No.:
                    </el-col>
                    <el-col :span="12">
                      <el-input :readonly="!editable"   v-model="data.documentprocess_cc_cdi_invoiceNO" placeholder="请输入内容"></el-input>
                    </el-col>
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <el-col :span="12" style="text-align:left;">
                      Invoice Date:
                    </el-col>
                    <el-col :span="12">
                      <el-date-picker value-format="yyyy-MM-dd" :disabled="!editable"    @change="mustUpdate2"   v-model="documentprocess_cc_cdi_invoiceDate" type="date" placeholder="选择日期"></el-date-picker>
                    </el-col>
                  </el-row>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <el-row class="-from">
          <el-col :span="24">
            <el-row>
              <el-col :span="4">
                <p>From:</p>
              </el-col>
              <el-col :span="8">
                <el-input :readonly="!editable"   v-model="data.documentprocess_cc_cdi_fromPort" placeholder="请输入内容"></el-input>
              </el-col>
              <el-col :span="4"> </el-col>
              <el-col :span="8" style="text-align: left;">
                Terms of Payment:
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <p>To:</p>
              </el-col>
              <el-col :span="8">
                <el-input :readonly="!editable"   v-model="data.documentprocess_cc_cdi_toPort" placeholder="请输入内容"></el-input>
              </el-col>
              <el-col :span="4"> </el-col>
              <el-col :span="8">
                <el-input :readonly="!editable"     v-model="data.documentprocess_cc_cdi_payTerms" placeholder="请输入内容"></el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <p>Shipment Date:</p>
              </el-col>
              <el-col :span="8">
                <el-date-picker class="shipment-date" value-format="yyyy-MM" format="yyyy/MM" :disabled="!editable"  @change="mustUpdate2"   type="date"  v-model="documentprocess_cc_cdi_shipDate" placeholder="请选择日期"></el-date-picker>
              </el-col>
              <el-col :span="4"> </el-col>
              <el-col :span="8" style="text-align: left;">
                Trade Term:
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <p>By:</p>
              </el-col>
              <el-col :span="8">
                <el-input :readonly="!editable"   v-model="data.documentprocess_cc_cdi_transport" placeholder="请输入内容"></el-input>
              </el-col>
              <el-col :span="4"> </el-col>
              <el-col :span="8">
                <el-input :readonly="!editable"    v-model="data.documentprocess_cc_cdi_tradeTerms" placeholder="请输入内容"></el-input>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <el-table :data="tableData" border style="width: 100%" :span-method="arraySpanMethod">
            <el-table-column type="index" label="Item" :index="indexMethod"></el-table-column>
          <el-table-column prop="documentprocess_cc_cdi_products" label="Description of Goods" >
            <template slot-scope="scope">
                        <el-input :readonly="!editable"   v-model="scope.row.documentprocess_cc_cdi_products" placeholder="请输入内容"></el-input>
                    </template>
          </el-table-column>
          <el-table-column prop="documentprocess_cc_cdi_description" label="Specification&Model">
            <template slot-scope="scope">
                        <el-input :readonly="!editable"   v-model="scope.row.documentprocess_cc_cdi_description" placeholder="请输入内容"></el-input>
                    </template>
          </el-table-column>
          <el-table-column  prop="documentprocess_cc_cdi_quantity" label="Quantity(PCS)">
            <template slot-scope="scope">
                        <input type="number" :min="0" :disabled="!editable" :step="1"   @input="handleInputChange" v-model="scope.row.documentprocess_cc_cdi_quantity" placeholder="请输入内容" />
             </template>
          </el-table-column>
          <el-table-column  label="Unit Price" :render-header="currencySel('Unit Price')">
               <el-table-column prop="documentprocess_cc_cdi_price"  :render-header="currentSelEN('')">
                    <template slot-scope="scope">
                      <el-input-number :min="0" :disabled="!editable"    :controls="false" v-model="scope.row.documentprocess_cc_cdi_price" placeholder="请输入内容"></el-input-number>
                      <!-- <input type="number" :min="0" :disabled="!editable"    @input="handleInputChange" v-model="scope.row.documentprocess_cc_cdi_price" placeholder="请输入内容"/> -->
                    </template>
               </el-table-column>
          </el-table-column>
          <el-table-column  label="Amount">
           <el-table-column prop="documentprocess_cc_cdi_lineAmount" :render-header="currentSelEN('')">
            <template slot-scope="scope">
              <!-- <el-input-number :min="0" :disabled="!editable"    :controls="false" v-model="scope.row.documentprocess_cc_cdi_lineAmount" placeholder="请输入内容"></el-input-number> -->
              <input type="number" :min="0" :disabled="!editable"     v-model="scope.row.documentprocess_cc_cdi_lineAmount" placeholder="请输入内容"/>
            </template>
          </el-table-column>
          </el-table-column>

          <el-table-column
          v-if="editable"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="addNewLine(scope.$index, data.documentprocess_cc_cdi_table)" type="text" size="small">添加</el-button>
            <el-button @click="removeCurrentLine(scope.$index, data.documentprocess_cc_cdi_table)" type="text" size="small">移除</el-button>
          </template>
        </el-table-column>
        </el-table>

        <el-row class="-footer">
          <el-col :span="24" class="-footer">
            <div>
              <div class="-footer-top">
                Origin of China
              </div>
              <p>Bank details for payment:</p>
              <p>Beneficiary Company：Tian Jin Financial Trade Link Import and Export Co.,Ltd</p>
              <p>Beneficiary A/C Bank：CHINA ZHESHANG BANK BEIJING BRANCH</p>
              <p>Bank Address: NO.1 FINANCIAL STEREET,XICHENG DISTRICT,BEIJING,CHINA</p>
              <p>SWIFT CODE：ZJCBCN2N</p>
              <p class="-footer-bottom">TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD</p>
            </div>
          </el-col>
        </el-row>
      </div>

    </div>



    <div class="upload">
      <p class="upload-hint">票据/附件</p>
      <div>
        <div class="upload-btn">
          <input type="file"  v-show="editable"  name="file" multiple @change="selectFiles">
          <el-button :disabled="!editable" type="primary">选择附件</el-button>
        </div>

        <ul class="upload-files">
          <li @mouseover="handleOver(item)"   @mouseout="handleOut(item)" v-for="(item,index) in data.attachedFiles" :key="index">
            <span @click="download(item.id, $event)">{{item.name}}</span>
            <span v-if="editable && item.status" class="el-icon-circle-check" style="color:#67c23a;"></span>
            <span v-else-if="editable" class="el-icon-circle-close" @click="changeFiles(index,item)" style="color:red;"></span>
          </li>
        </ul>
      </div>
    </div>
  </div>


</div>
</template>

<script>
import {uploadFiles} from '@/server/initiatingprocess';
import {filedownload , deleteFile} from '@/server/customermanagement/index.js'
import {toFixed} from '@/util/transform.js';

export default {
  created() {
    this.documentprocess_cc_cdi_invoiceDate = this.data.documentprocess_cc_cdi_invoiceDate;
    this.documentprocess_cc_cdi_shipDate = this.data.documentprocess_cc_cdi_shipDate;
    // this.data.documentprocess_cc_cdi_titleUP = this.data.documentprocess_cc_cdi_titleUP  || 'Unit Price(USD)';
    // this.data.documentprocess_cc_cdi_titleAm = this.data.documentprocess_cc_cdi_titleAm  ||  'Amount(USD)';
    
    this.currencyValue =  this.data.documentprocess_cc_cdi_currencyValue ;
  },
  mounted() {
    
    let _this = this;
    this.bus.$on('bind-new-ftc', function(ftcData){

      //关联绑定的外贸合同

      _this.data.documentprocess_cc_cdi_toName = ftcData.bf_buy_name;
      _this.data.documentprocess_cc_cdi_toAdd = ftcData.bf_buy_address;
      _this.data.documentprocess_cc_cdi_toTel = ftcData.bf_buy_tel;
      _this.data.documentprocess_cc_cdi_invoiceNO = ftcData.bf_orderNumber;
      _this.data.documentprocess_cc_cdi_fromPort = ftcData.bf_portOfLoad;
      _this.data.documentprocess_cc_cdi_toPort = ftcData.bf_portOfDestination;
      _this.data.documentprocess_cc_cdi_transport = ftcData.bf_shipment;
      _this.data.documentprocess_cc_cdi_tradeTerms = ftcData.bf_tradeTerm;

      _this.data.documentprocess_cc_cdi_currencyValue = ftcData.bf_bf_currencyValue;
      _this.currencyValue = ftcData.bf_bf_currencyValue;


      for(let i = 0; i < ftcData.bf_table1.length - 1; i++){
        if (!_this.data.documentprocess_cc_cdi_table[i]){
          _this.data.documentprocess_cc_cdi_table.push({
           documentprocess_cc_cdi_products : '',
           documentprocess_cc_cdi_description: '',
           documentprocess_cc_cdi_quantity: 0,
           documentprocess_cc_cdi_price: 0
          });
        }

        (_this.data.documentprocess_cc_cdi_table[i]).documentprocess_cc_cdi_products = (ftcData.bf_table1[i]).bf_table1_product;
        (_this.data.documentprocess_cc_cdi_table[i]).documentprocess_cc_cdi_description = (ftcData.bf_table1[i]).bf_table1_description;
        (_this.data.documentprocess_cc_cdi_table[i]).documentprocess_cc_cdi_quantity = parseInt((ftcData.bf_table1[i]).bf_table1_quantity);
        (_this.data.documentprocess_cc_cdi_table[i]).documentprocess_cc_cdi_price = toFixed((ftcData.bf_table1[i]).bf_table1_price, 2);
      }

      _this.data.documentprocess_cc_cdi_table.splice(ftcData.bf_table1.length);

      _this.$forceUpdate();
    });
  },
  updated(){

     this.currencyValue = this.data.documentprocess_cc_cdi_currencyValue ;
    if (this.clickTimes === 1 && this.relation){

      let flag = this.data.modifyTime ? true : false;

      let innerFlag = this.data.documentprocess_cc_cdi_table.findIndex(item => {
        return  item.modifyTime != null;
      }) == -1 ? false : true;

      flag  = flag || innerFlag;

      if (!flag) {
        //第一次关联货运委托书
        this.currencyValue =  this.data.documentprocess_cc_cdi_currencyValue ;
        this.data.documentprocess_cc_cdi_shipDate = this.relatedData.documentprocess_cc_lod_shipDate;
        this.documentprocess_cc_cdi_shipDate = this.data.documentprocess_cc_cdi_shipDate ;
      }


      this.clickTimes = 2;
    }

    this.updateTableData();

  },
  computed: {
    //   表格计算总金额
    tableData() {

      let current = this.data.documentprocess_cc_cdi_table;
      let quantitys = 0, amounts = 0;
      let lines = current.length;

      for (var i = 0; i < lines - 1; i++) {

        current[i].documentprocess_cc_cdi_quantity = parseInt(current[i].documentprocess_cc_cdi_quantity);
        current[i].documentprocess_cc_cdi_price = toFixed(current[i].documentprocess_cc_cdi_price, 2);


        current[i].documentprocess_cc_cdi_lineAmount = toFixed(Number(current[i].documentprocess_cc_cdi_quantity) * Number(current[i].documentprocess_cc_cdi_price), 2);
        quantitys += Number(current[i].documentprocess_cc_cdi_quantity);
        amounts += Number(current[i].documentprocess_cc_cdi_lineAmount);
      }

      current[lines - 1].documentprocess_cc_cdi_quantity = quantitys;
      current[lines - 1].documentprocess_cc_cdi_lineAmount = toFixed(amounts, 2);

      return current;
    }
  },
  methods: {

    editTitleUP(event){
      this.data.documentprocess_cc_cdi_titleUP = event.target.value;
    },

    editTitleAm(event){
      this.data.documentprocess_cc_cdi_titleAm = event.target.value;
    },

    //   合并单元格
    arraySpanMethod(row) {

      let lines = this.data.documentprocess_cc_cdi_table.length;

      if (row.rowIndex === lines - 1) {
        if (row.columnIndex === 0) {
          return [1, 3];
        } else if (row.columnIndex === 1) {
          return [0, 0];
        } else if (row.columnIndex === 2 || row.columnIndex === 4 || row.columnIndex === 6) {
          return [0, 0];
        } else if (row.columnIndex === 3 || row.columnIndex == 5){
          return [1, 2];
        }
      }
    },
    mustUpdate(){
      this.$forceUpdate();
    },
    mustUpdate2(){
      this.data.documentprocess_cc_cdi_shipDate = this.documentprocess_cc_cdi_shipDate;
      this.data.documentprocess_cc_cdi_invoiceDate = this.documentprocess_cc_cdi_invoiceDate;
      this.$forceUpdate();
    },
    indexMethod(value){
      let lines = this.data.documentprocess_cc_cdi_table.length;
      if (lines - 1 === value){
        return 'Total';
      }
      return value + 1;
    },
    specialInitialProcess() {
      let dom = document.querySelector('.initiatingprocess .routers-ctrl');
      if (dom) {
        dom.style.zIndex = '0';
      }
    },
    selectFiles(event) {
      //票据附件
      let _this = this;


      //直接上传，并且获得后端返回的文件的url,将url保存到 this.data.attachedFiles中
      uploadFiles(event.target.files).then((resArr)=>{
        resArr.forEach(function(res,i){
          _this.data.attachedFiles.push({name: event.target.files[i].name, status: 1, id: res.data.datas[0].id});
        });

        _this.$forceUpdate();
      });
    },
    changeFiles(index,item) {
      deleteFile({'id':item.id}).then((res) => {
        if(res.code != 1 ){
          this.$message.error('删除失败，请检查网络后重试');
        } else {
          this.data.attachedFiles.splice(index, 1);
        }
      });
    },
    handleOver(item){
      item.status = 0;
      this.$forceUpdate();
    },
    handleOut(item){
      item.status = 1;
      this.$forceUpdate();
    },
    download(id, event){
      window.open('http://47.104.93.41/api/common/download?id='+id);
    },

    addNewLine(currentIndex, table){
      let newLine = _.cloneDeep(table[currentIndex]);

      // for (let prop in newLine) {
      //   newLine[prop] = '';
      // }

      _.unset(newLine, 'id');
      _.unset(newLine, 'createTime');
      _.unset(newLine, 'formInstId');
      _.unset(newLine, 'cdiId');
      _.unset(newLine, 'modifyTime');

      table.splice(currentIndex + 1, 0, newLine);
      this.handleInputChange();
    },
    removeCurrentLine(currentIndex, table){
      if (table.length > 2){
        table.splice(currentIndex, 1);
      }
      this.handleInputChange();
    },
    handleInputChange(){
      this.updateTableData();
      this.$forceUpdate();
    },
    updateTableData(){
      let current = this.data.documentprocess_cc_cdi_table;
      let quantitys = 0, amounts = 0;
      let lines = current.length;

      for (var i = 0; i < lines - 1; i++) {

        current[i].documentprocess_cc_cdi_quantity = parseInt(current[i].documentprocess_cc_cdi_quantity);
        current[i].documentprocess_cc_cdi_price = toFixed(current[i].documentprocess_cc_cdi_price, 2);

        current[i].documentprocess_cc_cdi_lineAmount = toFixed(Number(current[i].documentprocess_cc_cdi_quantity) * Number(current[i].documentprocess_cc_cdi_price), 2);
        quantitys += Number(current[i].documentprocess_cc_cdi_quantity);
        amounts += Number(current[i].documentprocess_cc_cdi_lineAmount);
      }

      current[lines - 1].documentprocess_cc_cdi_quantity = quantitys;
      current[lines - 1].documentprocess_cc_cdi_lineAmount = toFixed(amounts, 2);
    },


       /**选择币种 */
    currencySel(name){
        return (h, {column, $index}) => {
        let self = this;
        var selAttr = {};
        if (!this.editable){
          selAttr.disabled = 'disabled';
        }
        return  h("div", {
          attrs: {
            class: "select-currency"
          }
        }, [
          h("span", name),
          h("select", {
            attrs: {...selAttr},
            domProps: {
            value: self.currencyValue || '人民币'
          },
          on: {
            change: function(event){
              self.currencyValue = event.target.value;
              self.data.documentprocess_cc_cdi_currencyValue = event.target.value;
            }
          }
          },[
            h("option", {
              attrs: {selected: true}
            }, "人民币"),
            h("option", "美元"),
            h("option", "加元"),
            h("option", "欧元"),
          ])
        ]);
      }
    },
    currentSelEN(name){
      return (h, {column, $index}) => {
        let temp = 'RMB';
        switch (this.currencyValue){
          case '人民币':
          temp = 'RMB';
          break;
          case '美元':
          temp = 'USD';
          break;
          case '欧元':
          temp = 'EUR';
          break;
          case '加元':
          temp = 'CAD';
          break;
        }
        return h('div',null, `${temp}`);
      }
    },
  },
  data() {
    return {
      clickTimes: 0,
      documentprocess_cc_cdi_shipDate: '',
      documentprocess_cc_cdi_invoiceDate: '',
      currencyValue: '人民币'
    }
  },
  props: {
    data: {
      type: Object,
      required: true
    },
    relatedData: {
      type: Object,
      required: true
    },
    relation: {
      type: Boolean,
      required: true
    },
    editable: {
      type: Boolean,
      required: true
    },
    bus: {
      type: Object,
      required: true
    }
  },
  components: {}
}
</script>

<style lang="scss">
.customsDeclarationInvoiceVue {

    .select-currency {
      select {
        margin-left: 12px;
        height: 30px;
        width: 60px;
      }
    }


    .shipment-date {
      position: relative;
      left: -55px;
    }



    padding: 20px;
    border: 1px solid #999;

    font-size: 15px;
    line-height: 30px;

    p {
      padding: 5px 0;

      span {
        font-weight: bolder;
      }
    }

    > h2 {
        text-align: center;
    }

    a {
        color: #409EFF;
    }
    .el-table {
        margin-bottom: 20px;
    }

    #title-up, #title-am{
      color: #878d99;
      border: none;
      background-color: rgb(230,230,230);
      height: 30px;
      text-align: center;
    }

          .el-input-number__decrease,
          .el-input-number__increase {
            width: 20px;

            border: none !important;
            background: transparent;
          }

          .el-input-number {
              width: 100px;
              min-width: 100px;
          }

    .head {
        .btns {
            width: 100%;
            height: 40px;
            text-align: center;
            .export {
                float: right;
            }
        }

        .tcf-table {
            margin-top: 20px;
            padding: 20px;
            box-sizing: border-box;
            h2 {
                text-align: center;
                padding: 10px 0;
            }

            .el-input-number {
              width: 100%;
            }


            input {
              border: none;
              outline: none;
              background-color: transparent;
              height: 100%;
            }
            

            td {

              border: 1px solid #e6ebf5;
              .el-input__inner {
                background: transparent;
                padding: 0;
              }
            }

            .el-input__inner {
              border:  none;
            }

            .tcf-table-title {
                text-align: center;
            }
            .tcf-table-in {
                border-top: 1px solid #999;
                .el-row {
                    box-sizing: border-box;
                    border-bottom: 1px solid #999;
                    border-left: 1px solid #999;
                }
                .el-col {
                    text-align: center;
                    line-height: 40px;
                    box-sizing: border-box;
                    border-right: 1px solid #999;
                    padding: 5px;
                }
            }
            .-to01,
            .-to03,
            .-to04 {
                height: 133px;
            }
            .-to04 {
                border-right: 1px solid #999 !important;
            }
            .-to02 {
                ul {
                    li {
                        margin-bottom: 1px;
                    }
                }
            }
            .-from {
                .el-col-24 {
                    padding: 0;
                    .el-row {
                        border: none;
                    }
                }
                .el-col-4,
                .el-col-8 {
                    border-right: none;
                }
            }
            .-footer {
                width: 100%;
                text-align: left !important;
                border: none !important;
                .-footer-top {
                    text-align: right !important;
                }
                .-footer-bottom {
                    text-align: center;
                }
            }
            .el-table {
                margin-top: 20px;
            }
            .el-select {
                width: 100%;
            }
            .-el-col {
                padding: 0 !important;
            }
            .bill-of-lading-project-requires-p {
                height: 392px;
            }
            .special-provisions {
                height: 351px;
            }
            .bill-of-lading-project-requires {
                width: 100%;
                border-bottom: 1px solid #999;
                box-sizing: border-box;
                .el-row {
                    box-sizing: border-box;
                    border: none;
                }
                .el-col {
                    text-align: center;
                    line-height: 40px;
                    box-sizing: border-box;
                    border: none;
                }
                .el-col-20 {
                    text-align: left;
                    text-indent: 20px;
                }
                .-el-col {
                    padding: 5px !important;
                    text-indent: 0;
                }
            }
            .-bill-of-lading-project-requires {
                border-bottom: none;

                .el-date-editor{
                  width: 100%;
                }
            }
            .sea-freight {
                .el-col {
                    text-align: center;
                    height: 90px;
                    line-height: 90px;
                    box-sizing: border-box;
                }
                .sea-freight-col {
                    line-height: 41px;
                    padding-top: 3px;
                }
            }
            .no-border {
                //   border: none !important;
            }

            .special-row {
                .el-col {
                    height: 25px;
                    line-height: 25px;
                }
            }

        }

        .upload {
            margin-top: 20px;
            padding: 0;
            > div {
                border: 1px solid #999;
                padding: 20px 0 40px 20px;
            }

            .upload-btn {
                position: relative;
                > input {
                    opacity: 0;
                    width: 100px;
                    height: 40px;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }

            .upload-files {

                > li {
                    width: 300px;
                    padding: 10px 0;
                    transition: all 0.5s linear;

                    &:hover {

                      >span {
                        color: #409EFF;
                      }
                    }
                  }

                font-size: 16px;
                span {
                    padding: 0 10px;
                    cursor: pointer;
                    display: inline;
                }
                span.el-icon-close:hover {
                    cursor: pointer;
                }
            }
            .upload-hint {
                font-size: 20px;
                margin-bottom: 10px;
            }
        }

    }

}
</style>
